<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:19:54
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\BarCode.vue
 * @Description: 条形码生成组件
-->
<template>
  <img class="barcode" :data-config="JSON.stringify(config)" :contenteditable="false" :code="52353255325" format="CODE128" />
</template>

<script setup lang="ts">
  import { reactive, onMounted, nextTick } from 'vue'
  // 条形码生成插件
  import JsBarcode from 'jsbarcode'
  // 接口约束
  import { IConfig } from '../../interface/page'
  let config: IConfig = reactive({
    type: '条形码',
    name: '',
    des: '',
    code: '52353255325',
  })

  onMounted(() => {
    nextTick(() => {
      JsBarcode('.barcode', '52353255325', {
        format: 'CODE128', //选择要使用的条形码类型
        width: 2, //设置条之间的宽度
        height: 40, //高度
        // text: '', //覆盖显示的文本
        fontOptions: 'bold', //使文字加粗体或变斜体  bold / italic / bold italic
        fontSize: 16, //设置文本的大小
        background: '#ddffff', //设置条形码的背景
        lineColor: '#333333', //设置条和文本的颜色。
      })
    })
  })
</script>
<style scoped lang="scss">
  .barcode {
    display: inline-block;
  }
</style>
